<template>
  <ul class="contact-container">
    <li>
      <a target="_blank" :href="data.github">
        <div class="icon"><Icon type="github"/></div>
        <span>{{data.githubName}}</span>
      </a>
    </li>
    <li>
      <a :href="`mailto:${data.mail}`">
        <div class="icon"><Icon type="mail"/></div>
        <span>{{data.mail}}</span>
      </a>
    </li>
    <li>
      <a href="">
        <div class="icon"><Icon type="weixin"/></div>
        <span>{{data.weixin}}</span>
      </a>
      <div class="pop">
        <img src="@/img/qrcode.jpg" alt="">
      </div>
    </li>
    <li>
      <a href="">
        <div class="icon"><Icon type="qq"/></div>
        <span>{{data.qq}}</span>
      </a>
      <div class="pop">
        <img src="@/img/qrcode.jpg" alt="">
      </div>
    </li>
  </ul>
</template>

<script>
import Icon from '../../Icon/index.vue';
import {mapState} from 'vuex';
export default {
  components:{
    Icon,
  },
  computed:
    mapState('setting',['data']),
  
}
</script>

<style lang="less" scoped>
  @import '~@/styles/var.less';
  .contact-container{
    list-style: none;
    padding: 20px;
    color: @gray;
    li{
      position: relative;
      height: 30px;
      line-height: 30px;
      margin: 14px 0;
      &:hover{
        .pop{
          transform: scaleY(1);
        }
      }
    }
    a{
      display: flex;
      align-items: center;
      cursor: pointer;
    }
    .icon{
      font-size: 26px;
      margin-right: 10px;
    }
    .pop{
      position: absolute;
      left: 0;
      bottom: 30px;
      padding: 10px 15px;
      background-color: #fff;
      border-radius: 5px;
      transform: scaleY(0);
      transform-origin: bottom center;
      transition: all 0.25s;
      &::after{
        content: '';
        position: absolute;
        width: 8px;
        height: 8px;
        left: 50%;
        transform: translate(-50%,50%) rotate(45deg);
        background-color: #fff;
        bottom: 0;
      }
      img{
        width: 150px;
        height: 150px;
      }
    }
  }
</style>